<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/orderStatus.css" />
</head>

<body class="gray">
	<div class="mui-content loading" id="vueMain">
		<div style="background: #FFF;padding:10px 0 10px 10px;color: #999;">订单号: {{list.order.order_no}} </div>
		<div class="status" style="padding:30px 15px;background: #FFF;" v-if="list.order.order_status!=10 && list.order.order_status!=7">
			<img src="../icon/status1.png" class="maximg" alt="" v-if="list.order.order_status==1" />
			<img src="../icon/status2.png" class="maximg" alt="" v-if="list.order.order_status==3" />
			<img src="../icon/status3.png" class="maximg" alt="" v-if="list.order.order_status==4" />
			<img src="../icon/status4.png" class="maximg" alt="" v-if="list.order.order_status==5" />
			<img src="../icon/status5.png" class="maximg" alt="" v-if="list.order.order_status==6||list.order.order_status==9||list.order.order_status==8" />
		</div>
	    <div class="location">
	    		<div class="mui-clearfix"><span class="mui-pull-right">{{list.order.mobile}}</span>收货人：{{list.order.accept_name}}</div>
	    		<div>收货地址：{{list.order.province_name}}{{list.order.city_name}}{{list.order.area_name}}{{list.order.address}}</div>
	    </div>
	    <div class="item comment">
  			<div class="product" >
  				<ul class="mui-table-view">
  				    <li class="mui-table-view-cell mui-media link" _id="detail" _href="detail.html" :_extras="'pid='+list.order_goods.id" >
  				        <a href="javascript:;" >
  				            <img class="mui-media-object mui-pull-left" :src="list.order_goods.img">
  				            <div class="mui-media-body">
  				               	<div class="name">{{list.order_goods.name}}</div>
  				               	<p >{{list.order_goods.stro}} {{list.order_goods.intro}}</p>
  				               	<p style="font-size: 14px;"><span class="mui-pull-right">x {{list.order_goods.amount}}</span> <span style="color: #f53048;">¥ {{list.order.payable_amount}}</span></p>
  				            </div>
  				        </a>
  				    </li>
  				</ul>
  			</div>
  		</div>
  		<div class="merchant mui-clearfix">
			<img :src="list.order_goods.logo" alt="" />
			<div class="name">{{list.order_goods.shop_name}}</div>
			<!--<div class="mui-clearfix btn">
				<div class="mui-pull-left">
					<a :href="'tel:'+list.order_goods.shop_phone">联系供应商</a>
				</div>
				<div class="mui-pull-left">
					<a href="javascript:void(0)">进入店铺</a>
				</div>
			</div>-->
		</div>
		
		<div class="itemed" v-if="list.order.invoice!=0">
			<div class="mui-clearfix">
				<div class="mui-pull-right">{{list.order.invoice_title.invoice_type}}</div>
				<div class="mui-pull-left">发票信息</div>
			</div>
			<div class="itemDetail">
				<p>发票抬头：{{list.order.invoice_title.invoice_name}}</p>
				<p>发票内容：{{list.order.invoice_title.invoice_body}}</p>
			</div>
		</div>
		
		<ul class="mui-table-view itemlist">
	        <li class="mui-table-view-cell">
	        		<div class="mui-pull-right">
	        			归还时间
	        			<p>{{list.order_goods.end_time}}</p>
	        		</div>
	        		<div class="mui-pull-left">
	        			租赁日期
	        			<p>{{list.order_goods.start_time}}</p>
	        		</div>
	        </li>
	        <li class="mui-table-view-cell">
	        		<div class="mui-pull-right">{{list.order_goods.goods_nums}}天</div>
	        		<div class="mui-pull-left">租赁时长</div>
	        </li>
	    </ul>
	    <div class="itemed" v-if="list.order.order_status!=1">
			<div class="mui-clearfix">
				<div class="mui-pull-left">续租须知</div>
			</div>
			<div class="itemDetail">
				<p style="color: #666;">{{list.text}}</p>
			</div>
		</div>
		
	    <div class="qrcode" v-if="list.order_goods.code">
	    		<div class="mui-clearfix">
	    			<div class="mui-pull-right">{{list.order_goods.code}}</div>
	    			验证码
	    		</div>
	    </div>
	    
	    
	    <ul class="mui-table-view orders">
            <li class="mui-table-view-cell num">
            		<p><span>¥ {{list.order.payable_amount}}</span>总额</p>
            		<p><span>¥ {{list.order.real_freight}}</span>运费</p>
            		<p><span>¥ {{list.order.prop_money}}</span>优惠券</p>
            		<p><span>¥ {{list.order.pay_fee}}</span> 订金</p>
            </li>
        </ul>
	    
	    
	    <div class="mui-content-padded" style="margin-top: 25px;" v-if="list.order.order_status==3">
			<button type="button" class="mui-btn bexta-btn bexta-btn-red mui-btn-block fukuan_btn">支付尾款</button>
	    </div>
	    
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, user;
	mui.init({
		beforeback:function(){
			if( views.opener().id == 'server' ){
				bexta.setStatus(true);
			}
		}
	});
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    user = bexta.getStorage(USER);
	    bexta.ajax(api.order_detail2, function(res){
	    		initVue(res);
	    }, {data:{uid:user.uid, order_no:views.order_no}});
	});
	function initVue(res){
		apps = new Vue({
			el:'#vueMain',
			data:{
				list:res
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				mui('#vueMain').on('tap', '.fukuan_btn', function(){
					bexta.ajax(api.update_order, function(res){
						bexta.openWithTitle({
							id:'pay',
							url:'pay.html',
							extras:{
								data:res
							}
						}, {
							title:{
								text:"订单支付"
							}
						});
					},{data:{uid:bexta.getStorage(USER).uid, order_no:apps.list.order.order_no,is_pay:1}});
				});
			}
		});
	}
</script>
</body>
</html>